<template>
    <div v-if="isShow">
        <a-form ref="formRef" class="smart-query-form">
            <a-row class="smart-query-form-row">
                <a-col span="20" class="smart-query-form-col">
                    <a-row class="smart-query-form-row" style="margin-top: 10px;">
                        <a-form-item label="年份" class="smart-query-form-item">
                            <a-date-picker :valueFormat="'YYYY'" :allowClear="false" style="width: 200px"
                                :defaultValue="null" v-model:value="queryForm.key" picker="year"
                                placeholder="请选择年份查看相关信息" />
                        </a-form-item>
                        <a-form-item class="smart-query-form-item">
                            <a-button type="primary" @click="queryData('1')">
                                <template #icon>
                                    <SearchOutlined />
                                </template>
                                查询
                            </a-button>
                            <a-button @click="resetQuery" class="smart-margin-left10">
                                <template #icon>
                                    <ReloadOutlined />
                                </template>
                                重置
                            </a-button>
                        </a-form-item>
                    </a-row>
                </a-col>
                <a-col span="4">
                    <a-form-item style="margin-top: 10px;width: 100%;">
                        <a-tooltip title="返回上级">
                            <a-button style="float: right;margin-right: 20px;" size="middle" @click="goback">
                                <template #icon>
                                    <RollbackOutlined />
                                </template>
                            </a-button>
                        </a-tooltip>
                    </a-form-item>
                </a-col>
            </a-row>

        </a-form>
        <a-card size="small" :bordered="false" :hoverable="true">
            <!---------- 表格 begin ----------->
            <a-table size="small" :dataSource="tableData" :columns="columns" rowKey="blfunduseid" bordered
                :loading="tableLoading" :pagination="false">
                <template #bodyCell="{ text, record, column }">
                    <template v-if="column.dataIndex === 'action'">
                        <div class="smart-table-operate">
                            <a-button @click="viewDetail(record)" type="link">查看详情</a-button>
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'blproposedmoney'">
                        <div class="smart-table-operate">
                            <span>{{record.blproposedmoney?'是':'否'}}</span>
                        </div>
                    </template>
                    <template v-if="column.dataIndex === 'blagreementname'">
                        <div class="smart-table-operate">
                            <a :href="record.blpersonphotopath" target="_blank" title="点击查看协议">{{ record.blagreementname
                                }}</a>
                        </div>
                    </template>
                </template>
            </a-table>
            <!---------- 表格 end ----------->
            <!-- 分页-->
            <div class="smart-query-table-page">
                <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
                    :defaultPageSize="queryForm.limit" v-model:current="queryForm.page"
                    v-model:pageSize="queryForm.limit" :total="total" @change="queryData" @showSizeChange="queryData"
                    :show-total="(total) => `共${total}条`" />
            </div>
            <div v-show="tableData.length!=0" class="pagination" style="margin: 10px 0px 10px 20px;">
                <div class="endWord">协议共计<span style="color: red;margin: 0px 5px;">{{total}}</span>份</div>
                <div class="endWord">协议金额共计 <span style="color: red;margin: 0px 5px;">{{totalMoney}}</span>(单位：元)</div>
            </div>
        </a-card>
    </div>
    <ProtocolDetail v-else :passParams="fuPassword" @emitPass="changeShow"></ProtocolDetail>
</template>

<script setup>
    import { nextTick, reactive, ref, defineProps, onMounted, toRefs } from 'vue';
    import { message, Modal } from 'ant-design-vue';
    import { getStatisticsApi } from '/@/api/infoStatistics/infoStatistics-api';
    import AreaCascader from '/@/components/framework/area-cascader/index.vue';
    import { SmartLoading } from '/@/components/framework/smart-loading';
    import Upload from '/@/components/support/file-upload/index.vue';
    import { regular } from '/@/constants/regular-const';
    import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
    import { smartSentry } from '/@/lib/smart-sentry';
    import _ from 'lodash';
    import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
    import ProtocolDetail from './ProtocolManage-operate.vue';
    const emits = defineEmits(['emitPass'])
    const goback = () => {
        let obj = {
            type: 0,
        };
        emits('emitPass', obj);
    };
    // 控制父组件是否展示
    const isShow = ref(true);
    const fuPassword = ref({});
    // 查看详情
    function viewDetail(data) {
        isShow.value = false;
        fuPassword.value = data;
    }
    // 改变父组件展示状态
    function changeShow() {
        isShow.value = true;
    }

    // ---------------------------- 表格列 ----------------------------
    const columns = ref([
        {
            title: '协议名称',
            dataIndex: 'blagreementname',
            align: 'center',
        },
        {
            title: '协议金额',
            dataIndex: 'blmoney',
            align: 'center',
            sorter: {
                compare: (a, b) => a.blmoney - b.blmoney,
            },
        },
        {
            title: '是否分配金额',
            dataIndex: 'blproposedmoney',
            align: 'center',
        },

        {
            title: '协议详情',
            dataIndex: 'action',
            align: 'center',
            fixed: 'right',
            width: 100,
        },
    ]);
    const queryFormState = {
        key: undefined, // 年份
        page: 1,
        limit: PAGE_SIZE,
    };
    // 查询表单form
    const queryForm = reactive({ ...queryFormState });
    // 表格加载loading
    const tableLoading = ref(false);
    // 表格数据
    const tableData = ref([]);
    // 总数
    const total = ref(0);
    // 总金额
    const totalMoney = ref(0);
    // 重置查询条件
    function resetQuery() {
        Object.assign(queryForm, queryFormState);
        queryForm.key = undefined;
        tableData.value = [];
        total.value = 0
        searchPage.value = false
    }
    const searchPage = ref(false)//检索的翻页
    // 查询数据
    async function queryData(a) {
        tableLoading.value = true;
        try {
            if (queryForm.key == undefined) {
                message.error('请选择年份');
            } else {
                if (a === '1') {
                    queryForm.page = 1;
                    searchPage.value = true
                }
                if (!searchPage.value) {
                    queryForm.key = undefined;
                }
                let queryResult = await getStatisticsApi.getYearList(queryForm);
                tableData.value = queryResult.data.list.records;
                total.value = queryResult.data.num;
                totalMoney.value = queryResult.data.money;
            }
        } catch (e) {
            smartSentry.captureError(e);
        } finally {
            tableLoading.value = false;
        }
    }

    // 选择表格行
    const selectedRowKeyList = ref([]);

    function onSelectChange(selectedRowKeys) {
        selectedRowKeyList.value = selectedRowKeys;
    }

</script>

<style lang="less" scoped>
</style>